<template>
  <div :class="['m-col', `m-col-${props.span}`]" :style="`width: calc((100% / 24) * ${s});`">
    <slot />
  </div>
</template>
<script setup>
/**
 * 使用方法：（结合 m-row 组件使用）
 * <m-row :gutter="20" class="first-floor">
    <m-col :span="4">xxxx</m-col>
    </m-row>
 * 
 * props:
 *      span    占比 （最高24份）
 * 
 */
import { ref, computed, inject } from 'vue'
import * as vue from 'vue'
const props = defineProps({
  span: {
    type: Number,
    default: 24
  }
})

const s = ref(props.span > 24 ? 24 : props.span)
const _width = computed(() => {})
</script>
<style scoped>
.m-col {
}
[class*='m-col-'] {
  float: left;
  box-sizing: border-box;
}

/* .m-col-1,
.m-col-2,
.m-col-3,
.m-col-4,
.m-col-5,
.m-col-6,
.m-col-7,
.m-col-8,
.m-col-9,
.m-col-10,
.m-col-11,
.m-col-12,
.m-col-13,
.m-col-14,
.m-col-15,
.m-col-16,
.m-col-17,
.m-col-18,
.m-col-19,
.m-col-20,
.m-col-21,
.m-col-22,
.m-col-23,
.m-col-24 {
  width: calc((100% / 24) * v-bind(s));
} */
</style>
